<template>
  <div style="margin-top: 100px;">
    <el-result v-if="user.length==0" icon="warning" title="当前未登录" subTitle="点击下面按钮进行登录">
      <template slot="extra">
        <el-button type="primary" size="medium" @click="s_login">去登录</el-button>
      </template>
    </el-result>
    <div v-else style="margin: 0 auto;width: 1200px;">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane label="我的购买" name="first">
          <div style="display: flex;align-items: center;justify-content: center;padding-top: 40px;">
            <el-input style="width: 600px;" clearable size="medium" placeholder="请输入订单号" v-model="id"
                      class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="load1"></el-button>
            </el-input>
          </div>
          <el-row style="margin: 0 auto;padding-top: 50px;padding-bottom: 80px;">
            <div style="padding-left: 30px;padding-bottom: 20px;">
							<span v-if="total==0">
								<el-empty :image-size="200"></el-empty>
							</span>
              <span v-else style="color: #949494;">共发现 {{total}} 个订单</span>
            </div>
            <el-card v-for="order_list in order_list" :key="order_list.id" shadow="hover"
                     style="cursor: pointer;margin-bottom: 30px;border-radius: 15px;"
                     @click.native="order_details(order_list.id)">
              <div style="display: flex;">
                <el-image v-if="order_list.photo" :src="order_list.photo" style="width: 17%;border-radius: 7px;">
                  <div slot="error">
                    <img src="../../assets/none.jpg" style="width: 17%;" />
                  </div>
                </el-image>

                <img v-else src="../../assets/none.jpg" style="width: 17%;">

                <div style="padding: 14px;width: 60%;display: flex;flex-direction: column;">
                  <span style="font-weight: 600;">{{order_list.name}}</span>
                  <span style="margin-top: 16px;">订单号：{{order_list.id}}</span>
                  <span style="margin-top: 28px;">{{order_list.time}}</span>
                </div>
                <div style="padding: 14px;width: 23%;">

                  <div style="display: flex;flex-direction: column;">
										<span style="text-align: end;">
											<el-tag type="success" disable-transitions>
												交易完成
											</el-tag>
										</span>
                    <el-button type="text" style="text-align: right;margin-top: 64px;">
											<span style="color: #4d4d4d;font-size: 17px;">
												成交价：
											</span>
                      <span style="color: #ff6700;font-size: 18px;">
												{{order_list.price}}元
											</span>

                    </el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="我的售出" name="second">
          <div style="display: flex;align-items: center;justify-content: center;padding-top: 40px;">
            <el-input style="width: 600px;" clearable size="medium" placeholder="请输入订单号" v-model="id2"
                      class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="load2"></el-button>
            </el-input>
          </div>
          <el-row style="margin: 0 auto;padding-top: 50px;padding-bottom: 80px;">
            <div style="padding-left: 30px;padding-bottom: 20px;">
							<span v-if="total2==0">
								<el-empty :image-size="200"></el-empty>
							</span>
              <span v-else style="color: #949494;">共发现 {{total2}} 个订单</span>
            </div>
            <el-card v-for="order_list2 in order_list2" :key="order_list2.id" shadow="hover"
                     style="cursor: pointer;margin-bottom: 30px;border-radius: 15px;"
                     @click.native="order_details2(order_list2.id)">
              <div style="display: flex;">
                <el-image v-if="order_list2.photo" :src="order_list2.photo" style="width: 17%;border-radius: 7px;">
                  <div slot="error">
                    <img src="../../assets/none.jpg" style="width: 17%;" />
                  </div>
                </el-image>

                <img v-else src="../../assets/none.jpg" style="width: 17%;">

                <div style="padding: 14px;width: 60%;display: flex;flex-direction: column;">
                  <span style="font-weight: 600;">{{order_list2.name}}</span>
                  <span style="margin-top: 16px;">订单号：{{order_list2.id}}</span>
                  <span style="margin-top: 28px;">{{order_list2.time}}</span>
                </div>
                <div style="padding: 14px;width: 23%;">

                  <div style="display: flex;flex-direction: column;">
										<span style="text-align: end;">
											<el-tag type="success" disable-transitions>
												交易完成
											</el-tag>
										</span>
                    <el-button type="text" style="text-align: right;margin-top: 64px;">
											<span style="color: #4d4d4d;font-size: 17px;">
												成交价：
											</span>
                      <span style="color: #ff6700;font-size: 18px;">
												{{order_list2.price}}元
											</span>

                    </el-button>
                  </div>
                </div>
              </div>
            </el-card>
          </el-row>
        </el-tab-pane>
      </el-tabs>

    </div>
    <transition v-if="isLoading" name="fade">
      <div  class="loading"></div>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : [],
      order_list: [],
      id: "",
      total: 0,
      order_list2: [],
      id2: "",
      total2: 0,
      status: "",
      activeName: 'first'
    }
  },
  created() {
    if(this.user.length!=0)
    {
      this.load1()
      this.load2()
    }
    else
    {
      this.isLoading = false
    }

  },
  methods: {
    s_login() {
      this.$router.push("/s_login")
    },
    load1() {
      this.request.get("/order/getOneOrderBuy?buyUid=" + this.user.id + "&Oid=" + this.id).then(
          res => {
            this.order_list = res.data
            this.total = res.total

            this.isLoading = false
          })
    },
    load2(){
      this.request.get("/order/getOneOrderSell?sellUid=" + this.user.id + "&Oid=" + this.id2).then(
          res => {
            this.order_list2 = res.data
            this.total2 = res.total

            this.isLoading = false
          })
    },
    order_details(id) {
      this.$router.push({
        path: '/my_buyorder_details',
        query: {
          Oid: id
        }
      });
    },
    order_details2(id) {
      this.$router.push({
        path: '/my_sellorder_details',
        query: {
          Oid: id
        }
      });
    },
  },
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}

</style>